<template>
  <div
    class="header"
    v-show="showabs"
    :style="opacityStyle"
  >
    城市详情
    <router-link to="/">
    <span class="iconfont icon-fanhui"></span>
  </router-link>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data () {
      return {
        showabs:false,
        opacityStyle : {
          opacity : 0
        }
      }
    },
    methods :{
      handleScroll () {
        // console.log(document.documentElement.scrollTop);//页面向上滚动的距离
        const top=document.documentElement.scrollTop;
        if(top>60){//滚动高度大于60
          let opacity=top / 140;//计算透明值
          opacity > 1 ? 1 :opacity;//最大不能超过1
          this.opacityStyle={//重新赋值
            opacity
          }
          this.showabs=true;
        }else{
          this.showabs=false;
        }
      }
    },
    mounted () {//生命周期钩子函数(页面一展示该函数就会执行) (实现头部渐现的效果)
      console.log(1111);
      window.addEventListener('scroll',this.handleScroll);//绑定scroll事件，会执行handleScroll()函数
    }
  }
</script>

<style lang="stylus" scoped>
  .header{
    background-color:#00bcd4;
    height:.44rem;
    text-align:center;
    color:white;
    line-height .44rem
    font-size .16rem
    position fixed
    top:0;
    left:0;
    right:0;
    span{
      position absolute
      left .1rem
      top 0
      font-size .18rem
      color white
    }
  }
</style>
